<template>
  <div>
    <div class="box">
      <div>
        <div>
          <span class="refuer"> 订单信息：</span>
          <span v-if="homeInfo.status == 0" class="pending">待处理</span>
          <span v-if="homeInfo.status == 1" class="returns">退货中</span>
          <span v-if="homeInfo.status == 2" class="completed">已完成</span>
          <span v-if="homeInfo.status == 3" class="refuse">已拒绝</span>
        </div>
        <div>
          <div class="information">
            <div>订单编号：{{ homeInfo.orderSn }}</div>
            <div>退单人姓名：{{ homeInfo.returnName }}</div>
            <div>退单理由：{{ homeInfo.reason }}</div>
            <div>退单描述：{{ homeInfo.description }}</div>
          </div>
          <div>申请时间：{{ homeInfo.createTime }}</div>
          <div v-if="homeInfo.status != 0">
            退单图片：<img
              :src="homeInfo.productPic"
              alt=""
              style="width: 100px"
            />
          </div>
        </div>
      </div>
      <hr style="margin-top: 50px; margin-bottom: 30px; width: 90%" />
      <div>
        <div style="font-size: 20px; margin-left: 2%">退货商品：</div>
        <div style="margin-left: 2%">
          <div
            style="width: 90%; height: 50px; border: 1px solid gray"
            class="creade"
          >
            <span>商品图片</span>
            <span>商品描述</span>
            <span>商品价格</span>
            <span>商品属性</span>
            <span>商品数量</span>
            <span>总计</span>
          </div>
          <div
            class="creades"
            style="width: 90%; height: 120px; border: 1px solid gray"
          >
            <span
              ><img :src="homeInfo.productPic" alt="" style="width: 100px"
            /></span>
            <span>
              {{ homeInfo.productName }}
              品牌：{{ homeInfo.productBrand }}
            </span>
            <span>{{ homeInfo.productPrice }}</span>
            <span>
              <div v-for="(item, index) in homeInfo.productAttr" :key="index">
                {{ item.key }}:{{ item.value }}
              </div></span
            >
            <span>{{ homeInfo.productCount }}</span>
            <span>{{ homeInfo.productRealPrice }}</span>
          </div>
        </div>
      </div>

      <div class="userage">
        <div class="userages">用户信息:</div>
        <div>联系人:{{ homeInfo.returnPhone }}</div>
        <div>联系电话:{{ homeInfo.returnPhone }}</div>
      </div>
      <hr style="margin-top: 50px; margin-bottom: 30px; width: 90%" />
      <div style="margin-left: 2%">
        <div style="font-size: 20px">费用信息:</div>
        <div class="homein">
          <div>退单金额:{{ homeInfo.returnAmount }}</div>
          <div>运费金额:0</div>
        </div>
        <!-- 待处理 -->
        <div v-if="homeInfo.status == 0">
          <div class="homeinf">
            <div>
              退款金额：
              <el-input-number
                v-model="tableData.returnAmount"
                @change="handleChange"
                :min="1"
                :max="10"
                label="退款金额"
                style="width: 200px"
              ></el-input-number>
            </div>
            <div>
              处理人：
              <el-input
                v-model="tableData.handleMan"
                placeholder="请输入处理人"
                style="width: 200px"
              ></el-input>
            </div>
            <div>
              处理备注：
              <el-input
                v-model="tableData.handleNote"
                placeholder="请输入处理备注"
                style="width: 200px"
              ></el-input>
            </div>
          </div>
          <div class="buttons">
            <el-button type="primary" @click="adds">同意退款</el-button>
            <el-button @click="add">拒绝退款</el-button>
          </div>
        </div>
        <hr style="margin-top: 50px; margin-bottom: 30px; width: 90%" />
        <!-- 处理结果 -->
        <div v-if="homeInfo.status !== 0" class="handdling">
          <div style="font-size: 20px">处理结果:</div>
          <div>处理人：{{ homeInfo.handleMan }}</div>
          <div>处理备注：{{ homeInfo.handleNote }}</div>
          <div>处理时间：{{ homeInfo.handleTime }}</div>
        </div>
        <hr style="margin-top: 50px; margin-bottom: 30px; width: 90%" />
        <div v-if="homeInfo.status == 1">
          <div class="abouter">
            <div>
              收货人：
              <el-input
                v-model="tableData.handleMan"
                placeholder="请输入收货人"
                style="width: 400px"
              ></el-input>
            </div>
            <div>
              收货备注：
              <el-input
                v-model="tableData.handleNote"
                placeholder="请输入收货备注"
                style="width: 400px"
              ></el-input>
            </div>
          </div>
          <div class="creadeser">
            <el-button type="primary" @click="goodser">确认收货</el-button>
          </div>
        </div>
        <div v-if="homeInfo.status == 2" class="handdling">
          <div style="font-size: 20px">收货信息:</div>
          <div>退单收货人：{{ homeInfo.receiveMan }}</div>
          <div>退单收货备注：{{ homeInfo.receiveNote }}</div>
          <div>退单收货时间：{{ homeInfo.receiveTime }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import orderFor from '@/api/orderFor.js'
import mixin from '@/mixins'

export default {
  mixins: [mixin],
  data() {
    return {
      homeInfo: [],
      tableData: {
        id: '',
        handleMan: '', //处理人
        handleNote: '', //处理备注
        returnAmount: '', //退款金额
      },
      receive: {
        id: '',
        receiveMan: '', //收货人
        receiveNote: '', //收货备注
      },
    }
  },
  created() {
    this.orderDetail()
  },
  mounted() {},
  methods: {
    handleChange(value) {
      console.log(value)
    },
    orderDetail() {
      orderFor.orderReturnApi(this.$route.params.id).then(res => {
        this.homeInfo = res.data.orderReturnApply
        this.homeInfo.productAttr = JSON.parse(this.homeInfo.productAttr)
      })
    },
    adds() {
      console.log('同意退款')
      orderFor
        .agreeApplyApi(this.$route.params.id, {
          id: this.$route.params.id,
          handleMan: this.tableData.handleMan,
          handleNote: this.tableData.handleNote,
          returnAmount: this.tableData.returnAmount,
          returnAmount: 0,
        })
        .then(res => {
          console.log(res, '同意退款的res')
        })
      this.orderDetail()
    },
    add() {
      console.log('拒绝退款')
      orderFor
        .rejectApplyApi(this.$route.params.id, {
          id: this.$route.params.id,
          handleMan: this.tableData.handleMan,
          handleNote: this.tableData.handleNote,
          returnAmount: this.tableData.returnAmount,
          returnAmount: 0,
        })
        .then(res => {
          console.log(res, '拒绝退款的res')
        })
      this.orderDetail()
    },
    //收到退款货物
    goodser() {
      console.log('确认收货')
      orderFor
        .receiveProductApi(this.$route.params.id, {
          id: this.$route.params.id,
          receiveMan: this.receive.receiveMan,
          receiveNote: this.receive.receiveNote,
        })
        .then(res => {
          console.log(res, '确认收货的res')
        })
      this.orderDetail()
    },
  },
}
</script>

<style lang="scss">
.creade span {
  /* display: block; */
  float: left;
  width: 16.665%;
  height: 50px;
  border: 1px solid gray;
  display: flex;
  align-items: center;
  justify-content: center;
}
.creades span {
  /* display: block; */
  float: left;
  width: 16.665%;
  height: 120px;
  border: 1px solid gray;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pending {
  background-color: #f56c6c;
  color: #fff;
  width: fit-content;
  border-radius: 3px;
}
.returns {
  background-color: #e6a23c;
  color: #fff;
  width: fit-content;
  border-radius: 3px;
}
.completed {
  background-color: #ecf5ff;
  color: #50a5ff;
  width: fit-content;
  border-radius: 3px;
}
.refuse {
  background-color: #f4f4f5;
  color: #adafb4;
  width: fit-content;
  border-radius: 3px;
}
.box {
  width: 95%;
  background: #fff;
  margin: 50px;
}
.refuer {
  font-size: 20px;
  margin-left: 2%;
}
.information {
  margin-left: 2%;
  width: 95%;
  margin-top: 30px;
  div {
    display: flex;
    width: 300px;
    float: left;
  }
}
.userage {
  width: 95%;
  display: flex;
  margin-left: 2%;
  margin-top: 50px;
  div {
    width: 400px;
  }
}
.userages {
  font-size: 20px;
}
.userage div:nth-child(2) {
  margin-top: 30px;
}
.userage div:nth-child(3) {
  margin-top: 30px;
}
.homein {
  width: 100%;
  display: flex;

  div {
    width: 500px;
    margin-top: 50px;
    margin-bottom: 30px;
  }
}
.homeinf {
  width: 100%;
  display: flex;
  div {
    margin-right: 100px;
  }
}
.buttons {
  text-align: center;
  margin-top: 50px;
}
.handdling {
  width: 100%;
  display: flex;
  div {
    width: 500px;
    margin-top: 50px;
  }
}

.handdling div:nth-child(2) {
  margin-top: 80px;
}
.handdling div:nth-child(3) {
  margin-top: 80px;
}
.handdling div:nth-child(4) {
  margin-top: 80px;
}
.abouter {
  display: flex;
  div {
    margin-right: 100px;
  }
}
.creadeser {
  text-align: center;
  margin-top: 30px;
}
</style>